<!--
ROBOT SENSOR BOAT (RSB) - DECISION SUPPORT SYSTEM (DSS) - MAIN FILE
Author: David Jia
Last Updated: July 17, 2013
-->

<html manifest="cache.manifest">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Robot Sensor Boat - Decision Support System</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="lib/io/util.js"></script>
<script type="text/javascript" src="lib/FileSaver/FileSaver.js"></script>
<script type="text/javascript" src="lib/Blob/Blob.js"></script>
<script type="text/javascript" src="lib/Blob/BlobBulider.js"></script>
<script type="text/javascript" src="lib/jquery/jquery-latest.min.js"></script>
<script type="text/javascript">

        ///////////////////////////////////////
        /////INITIALIZING GLOBAL VARIABLES/////
        ///////////////////////////////////////

        // MAP INFO
        var map;   
var obsCircle;                       
  var infowindow;                    
        var infoWindowKayakIndex = -1;  
  // BOAT TRACING VARIABLES
        var nMarkers = 0;                  
  var points = new Array();          
  var draw = 0;                    
  var howMany = 150;                
  var myMarkers = new Array();            
  var lines = new Array();          
        // REAL-TIME BOAT TRACES
        var traceBoat = new Array();          
        traceBoat.push(false);        
        traceBoat.push(true);        
        traceBoat.push(false);        
        // PREVIOUS TRACES
       
        // FLAGS TOGGLING MAP TRACES
  var markersToggle = false;        
  var linesToggle = true;    
        var boatPosToggle = true;          
        var obsPosToggle = true;          
	var obspoints = new Array(); // List of points of obstacle on map 
        var traceStopped = false;      
  // WAYPOINT LOCATIONS
        var waypoints = new Array(); // List of waypoint markers on map  
        var waypointLines = new Array(); // List of lines between waypoints on map  
        var waypointQueueIndex = -1; // Waypoint index currently being sent to boat
        var selectedWaypointMarker = null; // Selected waypoint marker (clicked)
        var waypointRadius = 5; // In meters
        // FLAGS TOGGLING WAYPOINT FUNCTIONALITY
        var realTimeToggle = true; // Previous or real-time trace
        var waypointLinesToggle = true; // Toggle lines between waypoints    
        var multPointsToggle = true; // Capability to set multiple waypoints on map
        var singleExecToggle = true; // Toggle waypoint single execution or loop
        var waypointDebug = false;  
        var startWaypoint = false;    
        // GENERAL FLAGS
        // Flags for sending commands to different boats
  var sendCmdToBoat = new Array();      
        sendCmdToBoat.push(false);        
        sendCmdToBoat.push(true);        
        sendCmdToBoat.push(false);        
        var offline = true; // Defaulted to interface being run offline (not connected
                                                                            // to the boats), changeable with checkbox
        var debug = true; // Debug mode
        // Kayak marker icons
        var kayakIcons = new Array();    

        ///////////////////////////////
        /////INITIALIZE GOOGLE MAP/////
        ///////////////////////////////
  function initialize() {
                // INITIALIZE ALL FLAGS THAT ARE BASED ON GUI SELECTIONS
                markersToggle = document.getElementById("tog_markers_radio_on").checked;    
                linesToggle = document.getElementById("tog_lines_radio_on").checked;            
                boatPosToggle = document.getElementById("boat_pos_radio_on").checked;      
               	obsPosToggle = document.getElementById("obstacle_pos_radio_on").checked;
                realTimeToggle = document.getElementById("toggle_trace_time_radio_curr").checked;        
                setRealTime();      
                multPointsToggle = document.getElementById("num_wpts_radio_mult").checked;    
                setMultPoints();      
                singleExecToggle = document.getElementById("exec_wpt_radio_sing").checked;      
                waypointDebug = document.getElementById("wpt_debug_chk").checked;    
                offline = document.getElementById("offline_chk").checked;      
                debug = document.getElementById("debug_chk").checked;      
               
                // MISC INITIALIZATIONS
                changeBoatsToCmd();    
                changeBoatsToTrace();    
               
                // INTIALIZE PANTHER HOLLOW LAKE POSITION ON GOOGLE MAP
                var myOptions = {
                center: new google.maps.LatLng(40.436697, -79.948767), // Panther Hollow Lake
                //center: new google.maps.LatLng(40.443408, -79.945650), // CMU Newell Simon Hall
                zoom: 20, // Zoom range is from 0-20 (20 is max)
                mapTypeId: google.maps.MapTypeId.SATELLITE // MapTypeId choices: ROADMAP,
                                                                                                   // SATELLITE (Google Earth),
                                                                                                   // HYBRID (mixture of normal and satellite),
                                                                                                   // TERRAIN
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);          
    map.setTilt(0);                    
   
/*
               var circleOptions = {
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                    center: new google.maps.LatLng(40.436697, -79.948767),//new google.maps.LatLng(40.436697, -79.948767),//(obsLat, obsLon),
                    radius: 1 
                };
    		
		obsCircle = new google.maps.Circle(circleOptions);
*/
                // KAYAK MARKERS FOR CURRENT BOAT POSITIONS INITIALIZED (AND CLICK
                // LISTENERS FOR EACH MARKER)
                kayakIcons[0] = new google.maps.Marker({map: map});      
                kayakIcons[1] = new google.maps.Marker({map: map});        
                kayakIcons[2] = new google.maps.Marker({map: map});        
                kayakIcons[0].setIcon('img/blue-kayak.png');      
                kayakIcons[1].setIcon('img/red-kayak.png');        
                kayakIcons[2].setIcon('img/pink-kayak.png');        
    google.maps.event.addListener(kayakIcons[0], "click", function() {
                        openLatLngWindow(kayakIcons[0], 1);      
    });            
    google.maps.event.addListener(kayakIcons[1], "click", function() {
                        openLatLngWindow(kayakIcons[1], 2);      
    });            
    google.maps.event.addListener(kayakIcons[2], "click", function() {
                        openLatLngWindow(kayakIcons[2], 3);      
    });            
                // CALL PREVIOUS TRACE DRAW MAP AT 2 SECOND INTERVAL
                var prevTraceDrawMapInterval = setInterval(function(){prevTraceDrawMap()}, 2000);                  
               
                // CALL CURRENT (REAL-TIME) TRACE DRAW MAP AT 1 SECOND INTERVAL
                var drawMapInterval = setInterval(function(){realTimeDrawMap()}, 1000);                  
 
                // ONCLICK HANDLER TO MAP FOR WAYPOINT SELECTION
                google.maps.event.addListener(map, 'click', function(event) {
                        // If waypoint command in progress, do nothing
                        if(startWaypoint) return;    
                        // Close infowindow if there is one that is open
                        if (infowindow) {
                                infowindow.close();              
                                infoWindowKayakIndex = -1;    
                                document.getElementById("rm_wpt_btn").disabled = true;      
                                selectedWaypointMarker = null;        
                        }
                        // Create a marker at the the location that was clicked
                        var marker = new google.maps.Marker({
                                position: event.latLng,    
                                map: map
                        });        
                        marker.setIcon('img/green-dot.png');    
                       
                        // Get rid of previous waypoints if multPoints is turned off
                        if(multPointsToggle == 0) {
                                while(waypoints.length!=0) {
                                        var oldMarker = waypoints.pop();    
                                        oldMarker.setMap(null);  
                                }
                        }
                        // Add marker was to waypoint list
                        waypoints.push(marker);            
                        updateWaypointList();      
                        if(waypoints.length > 1) {
                                drawWaypointLines();    
                        }
                        // Click listener for waypoint markers
                        google.maps.event.addListener(marker, "click", function() {
              selectedWaypointMarker = marker;        
                                if (infowindow) {
                                        infowindow.close();                
                                        infoWindowKayakIndex = -1;    
                                }
                                var latlng = marker.getPosition();    
                                var lat = latlng.lat();    
                                var lng = latlng.lng();    
                                var contentString = "Waypoint - ("+lat+", "+lng+")";      
                          infowindow = new google.maps.InfoWindow({content: contentString});    
                                infowindow.open(map, marker);  
                                // Enable remove waypoints button
                                document.getElementById("rm_wpt_btn").disabled = false;      
                                // On close of infowindow, disable remove waypoint button
                                google.maps.event.addListener(infowindow, "closeclick", function() {
                                        document.getElementById("rm_wpt_btn").disabled = true;      
                                        selectedWaypointMarker = null;        
                                });    
                        });        
                });      
               
        }
        // DRAW LINES BETWEEN WAYPOINT MARKERS
        function drawWaypointLines(point1, point2) {      
                if(point1==null || point2==null) {
                        point1 = waypoints[waypoints.length-1].getPosition();    
                        point2 = waypoints[waypoints.length-2].getPosition();    
                }
                var lineCoordinates = [point1, point2];          
                var lineSymbol = {
                  path: 'M 0,-0.5 0, 0.5',      
                        strokeWeight: 3,      
                        strokeOpacity: 1,    
                        scale: 3
                };            
                                       
                color = "#" + myHex(50) + "" +
                                + myHex(50) + ""
                                + myHex(50);                
               
                var line = new google.maps.Polyline({
                        path: lineCoordinates,            
                        strokeOpacity: 0,            
                        icons: [{
                                        icon: lineSymbol,            
                                        offset: '100%',              
                                        repeat: '10px'                  
                        }],                        
                        strokeColor: "green",        
                        //strokeColor: color,          
                        map: map,              
                        zIndex: 0
                });
                waypointLines.push(line);            
                if(!waypointLinesToggle)    
                        line.setVisible(false);          
        }
        // SHOW OR HIDE WAYPOINT LINES
        function showWaypointLines() {
                waypointLinesToggle = document.getElementById("wpt_line_radio_show").checked;    
                if(waypointLines) {
                        for(var i=0; i<waypointLines.length; i++) {  
                                waypointLines[i].setVisible(waypointLinesToggle);          
                        }
                }
        }

        /////////////////////////////////////////////////////
        /////DRAWING REAL-TIME BOAT DATA ONTO GOOGLE MAP/////
        /////////////////////////////////////////////////////
       
        function realTimeDrawMap() {
                // CHECK THAT REAL-TIME IS SELECTED
                if(!realTimeToggle)
                        return;    
               
                // READ CURRENT STATUS FILE
                var statusUrl = "";    
                var obsUrl = "";  
		var lat;
		var lng;
		var compass;
                
		var obsV = new Array();

                // Iterating getting status for each boat
                for(var i=0; i<3; i++) {
                        var boatNum = i+1;
                        if(traceBoat[i]) {
                                // Get status file URL from localhost or from boat depending on offline or
                                // not
                                if(offline) {
                                        statusURL = "http://localhost/boatStatuses/status"+boatNum+".txt";
					obsURL = "http://localhost/obsStatuses/obs.txt";
				}                                
				else{
                                        statusURL = "http://192.168.1.10"+boatNum+"/status.txt";
					obsURL = "http://192.168.1.10"+boatNum+"/obs.txt";
				}

                                // Parsing through obs.txt to get obstacles real-time position data
				//downloadUrl(i, obsURL, function(data, i) {

				downloadRemoteUrl(i, obsURL, function(data, i) {			
					var value = 800;
                                        var tempI = 0;
                                        var Xtemp = 0;
                                        var Ytemp = 0;
                                        var bearing = 0;
                                        var distance = 0;
                                        var obsLat = 0;
                                        var obsLon = 0;
                                        var latlng = 0;
					var R = 6371000;
                                        var obsCircle;
					var obsLatLng;
                                        for (var j=0; j<181; j++)
					{
//						alert("Hello" + j.toString());
//		                                var tag = data.documentElement.getElementsByTagName("value"); //+j.toString());
//						alert(tag.length);
//						value = tag[0].firstChild.data;
//						alert("Hello end");
//						value = parseFloat(value);
						if (value > 8138)
							continue;
		                                tempI = (90.0 / 180 * j+45)*Math.PI/180; 
		                                Xtemp = Math.cos(tempI)*value;
		                                Ytemp = Math.sin(tempI)*value;
		                                bearing = Math.atan(Xtemp/Ytemp);
		                                bearing = compass * Math.PI / 180 + bearing;
		                                distance = Math.sqrt(Math.pow((Xtemp/1000),2)+Math.pow((Ytemp/1000),2));
		                                obsLat = Math.asin(Math.sin(lat*Math.PI/180)*Math.cos(distance/R) + Math.cos(lat*Math.PI/180)*Math.sin(distance/R)*Math.cos(bearing));
						obsLon = lng + 180/Math.PI*Math.atan2(Math.sin(bearing)*Math.sin(distance/R)*Math.cos(lat*Math.PI/180),Math.cos(distance/R)-Math.sin(lat*Math.PI/180)*Math.sin(obsLat));

		                                obsLat = obsLat * 180 / Math.PI;
						obsLatLng = new google.maps.LatLng(parseFloat(obsLat), parseFloat(obsLon));
						if (obsV.indexOf(obsLatLng) > -1)
							continue;
						else {
							obsV.push(obsLatLng);
				                        var circleOptions = {

				                            strokeColor: '#FF0000',
				                            strokeOpacity: 0.8,
				                            strokeWeight: 2,
				                            fillColor: '#FF0000',
				                            fillOpacity: 0.35,
				                            map: map,
				                            center: obsLatLng,
				                            radius: 1
				                        };
				                        
				                      	obsCircle = new google.maps.Circle(circleOptions);
							obspoints.push(obsCircle);
							if(!obsPosToggle)    
				        			obsCircle.setVisible(false); 

				                }
					}
				});  

                                // Parsing through status.txt to get boat real-time position data
                                //downloadUrl(i, statusURL, function(data, i) {
                                downloadRemoteUrl(i, statusURL, function(data, i) {                               
					lat = data.documentElement.getElementsByTagName("lat")[0]
                                                        .firstChild.data;
                                        lng = data.documentElement.getElementsByTagName("lon")[0]
                                                        .firstChild.data;
                                      	compass = data.documentElement.getElementsByTagName("compass")[0]
                                                        .firstChild.data;
					compass = parseFloat(compass);

                                        var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));      
					lng = parseFloat(lng);

                                        // Plotting kayak markers on map
                                        kayakIcons[i].setPosition(latlng);    
                                        // Reposition infowindow if it exists)
                                        if(infoWindowKayakIndex == i)
                                                openLatLngWindow(kayakIcons[i], i+1);      
                                        if(boatPosToggle) {
                                                kayakIcons[i].setVisible(true);    
                                        }

                                        // TODO: Plotting lines
                                        // Check if waypoint has been reached (if waypoint command in
                                        // progress)
                                        if(startWaypoint && waypointQueueIndex>=0) {
                                                var goalLat = waypoints[waypointQueueIndex].getPosition().lat();    
                                                var goalLng = waypoints[waypointQueueIndex].getPosition().lng();    
                                                var dist = Math.sqrt(Math.pow(lat-goalLat,2)+Math.pow(lng-goalLng,2));    
                                                dist = dist*111120; // Convert to meters
                                                // If distance betweeen waypoint and boat is within given radius
                                                // move on to next waypoint on the list
                                                if(dist <= waypointRadius) {
                                                        goToWaypoint();    
                                                }
                                        }
                                });
          

      
                        } else {
                                kayakIcons[i].setVisible(false);  
                        }
                }
        }
       
        // UPDATE WAYPOINT RADIUS INPUT FROM GUI
        function updateWaypointRadius() {
                var tempRadius = document.getElementById("wpt_radius").value;    
                if(tempRadius!="" && !isNaN(tempRadius)) // Input error checking    
                        waypointRadius = tempRadius;    
                else {
                        document.getElementById("wpt_radius").value = 5;    
                        waypointRadius = 5;    
                }
        }

        ///////////////////////////////////////////////
        /////DRAWING PREVIOUS DATA ONTO GOOGLE MAP/////
        ///////////////////////////////////////////////
       
        function prevTraceDrawMap() {
                // CHECK THAT REAL-TIME IS NOT SELECTED
                if(realTimeToggle)
                        return;    
               
                // CHECK THAT TRACE IS NOT STOPPED
                if(traceStopped)
                        return;          
               
                // READ PREVIOUS TRACE XML FILE
                downloadUrl(-1, "logs/boats_log2.xml", function(data) {
                        // Loop through new set of lat/long positions
                var markers = data.documentElement.getElementsByTagName("status");
       
                        if (markers.length > nMarkers) {
                                var newLength = nMarkers + howMany;
                                if (newLength > markers.length){
                                        newLength == markers.length;
                                }
                                var color = "#";            
                                var latlng;              
                                // LOOP THROUGH NEW SET OF LAT/LONG POSITIONS
                                for (var i = nMarkers; i < newLength; i++) {
                                        // Lat/long position of a trace location
                                        var latlng = new google.maps.LatLng(
                                                        parseFloat(markers[i].getElementsByTagName("lat")[0].firstChild.data) ,                  
                                                        parseFloat(markers[i].getElementsByTagName("lon")[0].firstChild.data));          
                                        // Set current boat positions
                                        kayakIcons[0].setPosition(latlng);    
                                        kayakIcons[0].setVisible(true);        
                                        // Reposition infowindow if it exists)
                                        if(infoWindowKayakIndex == 0)
                                                openLatLngWindow(kayakIcons[0], 1);      

                                        if ((i%50 == 0) && markersToggle) {            
                                                var marker = createMarker(latlng, i); // markers[i].getAttribute("compass"));
                                        }
                                        points[i] = latlng;
                                        if ((i>0) && linesToggle) {
                                                var lineCoordinates = [points[i-1], points[i]];
                                                var lineSymbol = {
                                                          path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
                                                };    
                                       
                                                color = "#" + myHex(255-255*i/markers.length) + ""
                                                                + myHex(255-255*i/markers.length) + ""
                                                                + myHex(255-255*i/markers.length);              
                                       
                                                var line = new google.maps.Polyline({
                                                  path: lineCoordinates,            
                                                  //icons: [{
                                                        //icon: lineSymbol,            
                                                        //offset: '100%'              
                                                        //}],    
                                                  strokeColor: color,              
                                                  map: map,                
                                                  zIndex: i
                                                });
                                                lines[i-1] = line;                
                                        }
                                        nMarkers++;                    
                               
                                }
                        }
               
                        //nMarkers = markers.length;          
                });    
        }  
       
        // TOGGLES PREVIOUS OR REAL-TIME TRACE
        function setRealTime() {
                // Clear everything on the map
                stopTrace();    
                traceStopped = false;          
                if(infowindow) {
                        infowindow.close();              
                        infoWindowKayakIndex = -1;    
                }
                // Disable or enable appropriate options depending on whether real-time or
                // previous tracing was selected
                realTimeToggle = document.getElementById("toggle_trace_time_radio_curr").checked;        
                if(realTimeToggle) {
                        document.getElementById("trace_speed_radio_faster").disabled = true;      
                        document.getElementById("trace_speed_radio_slower").disabled = true;      
                        document.getElementById("start_trace_button").disabled = true;      
                        document.getElementById("stop_trace_button").disabled = true;      
                        document.getElementById("restart_trace_button").disabled = true;      
                } else {    
                        document.getElementById("trace_speed_radio_faster").disabled = false;      
                        document.getElementById("trace_speed_radio_slower").disabled = false;      
                        document.getElementById("start_trace_button").disabled = false;      
                        document.getElementById("stop_trace_button").disabled = false;      
                        document.getElementById("restart_trace_button").disabled = false;      
                }
        }

        ///////////////////////////////////////////
        /////MARKERS AND LINES FOR BOAT TRACES/////
        ///////////////////////////////////////////

        // CHANGE BOATS TO TRACE (BY NUMBER)
        function changeBoatsToTrace() {
                // Which boats that a sent command would affect
                traceBoat[0] = document.getElementById("boat_num_to_trace_1_chk").checked;      
                traceBoat[1] = document.getElementById("boat_num_to_trace_2_chk").checked;      
                traceBoat[2] = document.getElementById("boat_num_to_trace_3_chk").checked;      
                if(realTimeToggle) {
                        if(!traceBoat[0] && sendCmdToBoat[0]) {
                                alert("WARNING: You have selected to not trace a boat that commands are "+
                                                "being sent to");    
                        }
                        if(!traceBoat[1] && sendCmdToBoat[1]) {
                                alert("WARNING: You have selected to not trace a boat that commands are "+
                                                "being sent to");    
                        }
                        if(!traceBoat[2] && sendCmdToBoat[2]) {
                                alert("WARNING: You have selected to not trace a boat that commands are "+
                                                "being sent to");    
                        }
                }
                if(!traceBoat[0] && !traceBoat[1] && !traceBoat[2] && realTimeToggle)
                        alert("WARNING: No boats are selected for real-time tracing at the moment");      
        }
        // OPEN LAT/LONG WINDOW FOR EXISTING KAYAK MARKER
        function openLatLngWindow(kayakIcon, num) {
                // Disable remove waypoint button
                document.getElementById("rm_wpt_btn").disabled = true;      
                selectedWaypointMarker = null;        
    // Close open infowindow if it does not belong to the kayak marker that was
                // clicked
                if(infowindow && infoWindowKayakIndex!=num-1) {
                        infowindow.close();              
                        infoWindowKayakIndex = -1;    
                }
                // Either make new infowindow or update content string (lat/long) on
                // current infowindow
                var contentString = "Boat "+num+" - ("+kayakIcon.getPosition().lat()+
                                ", "+kayakIcon.getPosition().lng()+")";      
    if (infoWindowKayakIndex!=num-1) {
            infowindow = new google.maps.InfoWindow({content: contentString});      
                  infowindow.open(map, kayakIcon);        
                        infoWindowKayakIndex = num-1;    
                        google.maps.event.addListener(infowindow, "closeclick", function() {
                                infoWindowKayakIndex = -1;    
                        });        
                  infowindow.setVisible(true);    
                } else {
                  infowindow.setContent(contentString);                        
                  infowindow.setVisible(true);    
                }
        }

  // CREATE MARKER AT CERTAIN LOCATION
  function createMarker(latlng, compass) {
    var marker = new google.maps.Marker({position: latlng, map: map});      
    google.maps.event.addListener(marker, "click", function() {
                        // Disable remove waypoint button
                        document.getElementById("rm_wpt_btn").disabled = true;      
                        selectedWaypointMarker = null;        
      if (infowindow) {
                                infowindow.close();                
                                infoWindowKayakIndex = -1;    
                        }
      var contentString = 'Data entry: ' + compass;    
      infowindow = new google.maps.InfoWindow({content: contentString});    
      infowindow.open(map, marker);  
    });      
    myMarkers[myMarkers.length+1] = marker;    
                infoWindowKayakIndex = -1;  
    return marker;      
  }
        // CLEAR ALL MARKER TRACES  
  function clearMarkers(){
        if (myMarkers){
                        for (i in myMarkers) {
                                myMarkers[i].setMap(null);                  
                        }
        }
  }
        // CLEAR ALL LINES
  function clearLines(){
        if (lines){
                        for (i in lines) {
                                lines[i].setMap(null);              
                        }
        }
  }
        // STOP BOAT TRACES
  function stopTrace(){
                restart();    
                traceStopped = true;          
  }
        // START BOAT TRACES
  function startTrace(){
                if(traceStopped)
                        restart();          
  }
        // RESTART ALL TRACES
  function restart(){
                nMarkers = 0;                  
        clearLines();                    
        clearMarkers();                
                if(kayakIcons && kayakIcons.length == 3) {
                        kayakIcons[0].setPosition(null);  
                        kayakIcons[1].setPosition(null);  
                        kayakIcons[2].setPosition(null);  
                }
                traceStopped = false;    
  }
        // TOGGLING MARKERS ON BOAT TRACE
        function setMarkersOn(){
                markersToggle = document.getElementById("tog_markers_radio_on").checked;    
  }
        // TOGGLING LINES ON BOAT TRACE
  function setLinesOn(){
                linesToggle = document.getElementById("tog_lines_radio_on").checked;    
  }
        // TOGGLING CURRENT BOAT POSITIONS
        function setBoatPosOn() {
                boatPosToggle = document.getElementById("boat_pos_radio_on").checked;      
                if(boatPosToggle) {
                        kayakIcons[0].setVisible(true);  
                        kayakIcons[1].setVisible(true);  
                        kayakIcons[2].setVisible(true);  
                }       else {
                        kayakIcons[0].setVisible(false);  
                        kayakIcons[1].setVisible(false);  
                        kayakIcons[2].setVisible(false);  
                }
        }
	
        // TOGGLING CURRENT OBSTACLE POSITIONS
	function setObsPosOn() {
		obsPosToggle = document.getElementById("obstacle_pos_radio_on").checked;
                if(obspoints) {
                        for(var i=0; i<obspoints.length; i++) {  
                                obspoints[i].setVisible(obsPosToggle);          
                        }
                }
        }
        
        //////////////////////////////////////
        /////WAYPOINT SELECTION FUNCTIONS/////
        //////////////////////////////////////
       
        // SETTING MULTIPLE WAYPOINT SELECTIONS
        function setMultPoints() {
                multPointsToggle = document.getElementById("num_wpts_radio_mult").checked;    
                if(!multPointsToggle) {  
                        // Disable options that are relevant to multiple waypoints
                        document.getElementById("exec_wpt_radio_sing").disabled = true;    
                        document.getElementById("exec_wpt_radio_loop").disabled = true;    
                        document.getElementById("wpt_line_radio_show").disabled = true;    
                        document.getElementById("wpt_line_radio_hide").disabled = true;    
                        // Remove all previous waypoints (and waypoint lines) from list and map
                        clearWaypoints();    
                } else {
                        // Enable options that are relevant to multiple waypoints
                        document.getElementById("exec_wpt_radio_sing").disabled = false;    
                        document.getElementById("exec_wpt_radio_loop").disabled = false;    
                        document.getElementById("wpt_line_radio_show").disabled = false;    
                        document.getElementById("wpt_line_radio_hide").disabled = false;    
                }
        }
        // SETTING WAYPOINT SELECTION EITHER LOOP OR BE A SINGLE EXECUTION    
        function setSingleExec() {
                singleExecToggle = document.getElementById("exec_wpt_radio_sing").checked;      
        }
        // TOGGLE WAYPOINT DEBUG (WAYPOINT SEND COMMAND WORKS WITHOUT THE BOAT
        // ACTUALLY REACHING THE DESTINATION WHEN OPTION IS SELECTED)
        function toggleWaypointDebug() {
                waypointDebug = document.getElementById("wpt_debug_chk").checked;    
                if(waypointDebug) {
                        document.getElementById("gtw_cmd_btn").disabled = false;      
                        alert("Selecting this option allows for all waypoints in queue to "+
                                        "be stepped through regardless of whether boats have reached "+
                                        "the current goal");    
                }
        }      
        // CLEAR ALL WAYPOINTS    
        function clearWaypoints() {
                if(startWaypoint) return;        
                // Removes all waypoint markers from map
                while(waypoints.length != 0) {
                        var marker = waypoints.pop();    
                        marker.setVisible(false);          
                }
                // Update list (will remove all elements)
                updateWaypointList();      
                // Remove all waypoint lines from map
                if(waypointLines) {
                        while(waypointLines.length > 0) {  
                                var line = waypointLines.pop();      
                                line.setVisible(false);          
                        }
                }
        }
        // REMOVE SELECTED WAYPOINT
        function removeWaypoint() {
                if(selectedWaypointMarker!=null && !startWaypoint) {
                        if(infowindow) {
                                infowindow.close();    
                                infoWindowKayakIndex = -1;    
                        }
                        var index = waypoints.indexOf(selectedWaypointMarker);        
                        // Remove waypoint from GUI list
                        var list = document.getElementById("wpt_list");        
                        list.removeChild(list.getElementsByTagName("li")[index]);    
                        // Remove the appropriate lines from map and replace them
                        if(waypoints.length > 1) {
                                if(index == 0) {
                                        var line = waypointLines[index];    
                                        line.setVisible(false);    
                                        waypointLines.splice(0, 1);  
                                } else if(index == waypoints.length-1) {  
                                        var line = waypointLines[waypointLines.length-1];    
                                        line.setVisible(false);    
                                        waypointLines.splice(waypointLines.length-1, 1);  
                                } else {
                                        var line = waypointLines[index-1];    
                                        line.setVisible(false);    
                                        line = waypointLines[index];    
                                        line.setVisible(false);    
                                        waypointLines.splice(index-1, 2);  
                                        var point1 = waypoints[index-1].getPosition();    
                                        var point2 = waypoints[index+1].getPosition();    
                                        drawWaypointLines(point1, point2);    
                                }
                        }
                        // Remove marker from map
                        selectedWaypointMarker.setVisible(false);        
                        waypoints.splice(index, 1);    
                }
                selectedWaypointMarker = null;        
                document.getElementById("rm_wpt_btn").disabled = true;      
        }
        // SAVE WAYPOINT LAT/LONG LIST TO A TEXT FILE
        // CURRENTLY DOESN'T EXACTLY WORK (OPENS NEW WINDOW WITH TEXT FILE)
        function saveWaypoints() {
                if(waypoints.length == 0) return;            
                var waypointText = new Array();          
                for(var i=0; i<waypoints.length; i++) {
                        var marker = waypoints[i];    
                        var lat = marker.getPosition().lat();    
                        var lng = marker.getPosition().lng();    
                        waypointText.push("("+lat+", "+lng+")"+"\n");    
                }
                var blob = new Blob(waypointText, {type: "text/plain;charset=utf-8"});    
                saveAs(blob, "waypoint_list.txt");    
        }

        // UPDATE LIST OF WAYPOINTS
        function updateWaypointList() {
                var list = document.getElementById("wpt_list");    
                while(list.getElementsByTagName("li").length != 0) {
                        list.removeChild(list.getElementsByTagName("li")[0]);    
                }
                for(var i=0; i<waypoints.length; i++) {
                        var marker = waypoints[i];    
                        var listItem = document.createElement("li");    
                        var listValue =
                        document.createTextNode("("+marker.getPosition().lat()+
                                        ", "+marker.getPosition().lng()+")");      
                        listItem.appendChild(listValue);    
                        list.appendChild(listItem);        
                }
        }

        // SET HOW FAST A TRACE OF PAST BOAT DATA OCCURS
  function setFaster(){
        howMany=99999;
  }
  function setSlower(){
        howMany=150;
  }
 
        ////////////////////////////////////////////
  /////COMMANDS THAT CAN BE SENT TO BOATS/////
        ////////////////////////////////////////////

        // goToWaypoint
        // goToHeading
        // halt
        // goAtSpeed
        // goHeadingSpeed
        // goHeadingSpeedMixed
 
  function goToWaypoint() {
                // Check if there are any waypoints on the map first
                if(waypoints.length == 0) {
                        alert("ERROR: No waypoints current selected");    
                        return;      
                }
                // Get precision argument
                var precision = document.getElementById("precision_gtw").value;
		var speed = document.getElementById("speed_gtw").value;       
                if(precision=="" || isNaN(precision) || speed=="" || isNaN(speed)) // Input error checking    
                        return;  
                // Set startWaypoint flag
                startWaypoint = true;    
                toggleAllWaypointOptions();    
                // Update waypoint queue index
                ++waypointQueueIndex;                  
                // Get waypoint GUI list element
                var list = document.getElementById("wpt_list");    
                // Check if waypoint has reached the end
                // Single execution (don't send anymore waypoint commands)      
                if(waypointQueueIndex==waypoints.length && singleExecToggle) {
                        waypointQueueIndex = -1;                  
                        list.getElementsByTagName("li")[waypoints.length-1].style.backgroundColor = "white";    
                        startWaypoint = false;    
                        toggleAllWaypointOptions();    
                        return;          
                // Loop execution (go back to first waypoint and continue sending waypoint commands)    
                } else if(waypointQueueIndex==waypoints.length && !singleExecToggle) {
                        waypointQueueIndex = 0;                  
                }
                // Updating waypoint list highlights
                list.getElementsByTagName("li")[waypointQueueIndex].style.backgroundColor = "cyan";    
                if(waypointQueueIndex > 0)                  
                        list.getElementsByTagName("li")[waypointQueueIndex-1].style.backgroundColor = "white";    
                else if(waypoints.length != 1)
                        list.getElementsByTagName("li")[waypoints.length-1].style.backgroundColor = "white";    
                // Get waypoint location
                var latlng = waypoints[waypointQueueIndex].getPosition();    
                var lat = latlng.lat();    
                var lng = latlng.lng();    
                // Send new waypoint command
                var command = sendCommand("/cgi-bin/serverScript.pl?command=goToWaypoint&args=["+
                                lat+", "+lng+", "+precision+", "+speed+"]");                
        }
        function abortWaypoints() {
                startWaypoint = false;    
                toggleAllWaypointOptions();    
        }
        function toggleAllWaypointOptions() {    
                if(startWaypoint) {
                        document.getElementById("num_wpts_radio_sing").disabled = true;    
                        document.getElementById("num_wpts_radio_mult").disabled = true;    
                        document.getElementById("exec_wpt_radio_sing").disabled = true;    
                        document.getElementById("exec_wpt_radio_loop").disabled = true;    
                        document.getElementById("wpt_line_radio_show").disabled = true;    
                        document.getElementById("wpt_line_radio_hide").disabled = true;    
                        document.getElementById("clear_wpts_btn").disabled = true;    
                        document.getElementById("rm_wpt_btn").disabled = true;    
                        if(!waypointDebug)
                                document.getElementById("gtw_cmd_btn").disabled = true;      
                        else
                                document.getElementById("gtw_cmd_btn").disabled = false;      

                } else {
                        document.getElementById("num_wpts_radio_sing").disabled = false;    
                        document.getElementById("num_wpts_radio_mult").disabled = false;    
                        document.getElementById("exec_wpt_radio_sing").disabled = false;    
                        document.getElementById("exec_wpt_radio_loop").disabled = false;    
                        document.getElementById("wpt_line_radio_show").disabled = false;    
                        document.getElementById("wpt_line_radio_hide").disabled = false;    
                        document.getElementById("clear_wpts_btn").disabled = false;    
                        document.getElementById("gtw_cmd_btn").disabled = false;      
                        waypointQueueIndex = -1;      
                        var list = document.getElementById("wpt_list");    
                        for(var i=0; i<list.getElementsByTagName("li").length; i++) {
                                list.getElementsByTagName("li")[i].style.backgroundColor = "white";    
                        }
                }
        }
  function goToHeading() {
                var heading = document.getElementById("heading_gth").value;    
                if(heading!="" && !isNaN(heading)) { // Input error checking
                        sendCommand("/cgi-bin/serverScript.pl?command=goToHeading&args=["+heading+"]");          
                }
  }
  function halt() {
                startWaypoint = false;    
                toggleAllWaypointOptions();    
                sendCommand("/cgi-bin/serverScript.pl?command=halt&args=[]");    
  }
  function goAtSpeed() {
                var speed = document.getElementById("speed_gas").value;    
                if(speed!="" && !isNaN(speed)) { // Input error checking
                        sendCommand("/cgi-bin/serverScript.pl?command=goAtSpeed&args=["+speed+"]");          
                }
  }
  function goHeadingSpeed() {
                var heading = document.getElementById("heading_ghs").value;    
                var speed = document.getElementById('speed_ghs').value;    
                // Input error checking
                if(heading!="" && speed!="" && !isNaN(heading) && !isNaN(speed)) {
                        sendCommand("/cgi-bin/serverScript.pl?command=goHeadingSpeed&args=["+        
                                        heading+", "+speed+"]");              
                }
  }
  function goHeadingSpeedMixed() {
                var heading = document.getElementById("heading_ghsm").value;    
                var speed = document.getElementById('speed_ghsm').value;    
                // Input error checking
                if(heading!="" && speed!="" && !isNaN(heading) && !isNaN(speed)) {
                        sendCommand("/cgi-bin/serverScript.pl?command=goHeadingSpeedMixed&args=["+  
                                        heading+", "+speed+"]");      
                }
  }
        // SEND COMMAND HELPER FUNCTION
        function sendCommand(commandEnd) {
                var command = "";        
                // Iterating sending command for each boat
                for(var i=0; i<3; i++) {
                        var boatNum = i+1;      
                        if(sendCmdToBoat[i]) {
                                if(!offline)    
                                        command = "http://192.168.1.10"+boatNum+commandEnd;  
                                else
                                        command = "http://localhost"+commandEnd;  
                                if(debug)
                                        alert("COMMAND SENT (DEBUG): " + command);              
                                // Send command to serverScript.pl
                                else
                                        //window.location = command; // Opens in current window  
                                        window.open(command).reload(true); // Opens in new tab  
                        }
                }
        }
        // TOGGLE DEBUG FLAG
        function toggleDebug() {
                debug = document.getElementById("debug_chk").checked;      
        }
        // CHANGE BOATS TO COMMAND (BY NUMBER)
        function changeBoatsToCmd() {
                // Which boats that a sent command would affect
                sendCmdToBoat[0] = document.getElementById("boat_num_to_cmd_1_chk").checked;      
                sendCmdToBoat[1] = document.getElementById("boat_num_to_cmd_2_chk").checked;      
                sendCmdToBoat[2] = document.getElementById("boat_num_to_cmd_3_chk").checked;      
                if(realTimeToggle) {
                        if(sendCmdToBoat[0]) {
                                document.getElementById("boat_num_to_trace_1_chk").checked = true;      
                                traceBoat[0] = true;    
                        }
                        if(sendCmdToBoat[1]) {
                                document.getElementById("boat_num_to_trace_2_chk").checked = true;      
                                traceBoat[1] = true;    
                        }
                        if(sendCmdToBoat[2]) {
                                document.getElementById("boat_num_to_trace_3_chk").checked = true;      
                                traceBoat[2] = true;    
                        }
                }              
                if(!sendCmdToBoat[0] && !sendCmdToBoat[1] && !sendCmdToBoat[2])
                        alert("WARNING: No boats are selected for commands to be sent to at the moment");    
        }
        // Check status of offline/online
        function changeOffline() {
                offline = document.getElementById("offline_chk").checked;      
        }

        ////////////////////////////////////////
        /////MISCELLANEOUS HELPER FUNCTIONS/////
        ////////////////////////////////////////
       
        // Convert to hex
  function myHex(number){
        number = Math.round(number);
        if (number < 16)
                return "0" + number.toString(16);
        return number.toString(16);
  }

  </script>
</head>

<body onload="initialize()">
  <table><tr><td>
  <!--////////////////
        /////GOOGLE MAP/////
        /////////////////-->
        <div id="map_canvas" style="width:800px; height:600px"></div>
  </td><td>

  <!--///////////////////////////
        /////RIGHT COLUMN COMMANDS/////
        ////////////////////////////-->
        <table style="border:1px solid black;" width="325"><tr><td><div align="center"><b>OPTIONS</b></div>
                <label for="offline_chk"><i>Offline</i></label>
                <input type="checkbox" id="offline_chk" name="offline_chk" checked="checked" onchange="changeOffline()" />
                <label for="debug_chk"><i>Debug</i></label>
                <input type="checkbox" id="debug_chk" name="debug_chk"
                                checked="checked" onchange="toggleDebug()" /><br>
                <i>Boats to Command</i>
                <input type="checkbox" name="boat_num_to_cmd_1_chk" id="boat_num_to_cmd_1_chk"    
                                onchange="changeBoatsToCmd()">1</input>
                <input type="checkbox" name="boat_num_to_cmd_2_chk" id="boat_num_to_cmd_2_chk"    
                                onchange="changeBoatsToCmd()" checked="checked">2</input>
                <input type="checkbox" name="boat_num_to_cmd_3_chk" id="boat_num_to_cmd_3_chk"    
                                onchange="changeBoatsToCmd()">3</input><br>
                <!--label for="boat_num"><i>Boat Number</i></label>
                <select id="boat_num" name="boat_num" onchange="changeBoat()" />
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select><br-->
        </td></tr></table><br>
        <!--Go to waypoint command-->
        <table style="border:1px solid black;" width="325"><tr><td><div align="center"><b>GO TO WAYPOINT</b></div>
                <label for="precision_gtw"><i>Precision</i><label>
                <input type="text" id="precision_gtw" name="precision_gtw" value="5" /><br>
                <label for="speed_gtw"><i>Speed&nbsp&nbsp&nbsp&nbsp&nbsp</i><label>
                <input type="text" id="speed_gtw" name="speed_gtw" value="1" /><br>
                <button id="gtw_cmd_btn" onclick="goToWaypoint()">Send Command</button>
                <button onclick="abortWaypoints()">Abort Remaining Waypoints</button>
        </td></tr></table>
        <!--Go to heading command-->
        <table style="border:1px solid black;" width="325"><tr><td><div align="center"><b>GO TO HEADING</b></div>
                <label for="heading_gth"><i>Heading&nbsp</i></label>
                <input type="text" id="heading_gth" name="heading_gth" value="0" /><br>
                <button onclick="goToHeading()">Send Command</button>
    </td></tr></table>
    <!--Halt command-->
        <table style="border:1px solid black;" width="325"><tr><td><div align="center"><b>HALT</b></div>
          <button onclick="halt()">Send Command</button>
        </td></tr></table>
        <!--Go at speed command-->
        <table style="border:1px solid black;" width="325"><tr><td><div align="center"><b>GO AT SPEED</b></div>
                <label for="speed_gas"><i>Speed&nbsp&nbsp&nbsp&nbsp&nbsp</i></label>
                <input type="text" id="speed_gas" name="speed_gas" value="0" /><br>
                <button onclick="goAtSpeed()">Send Command</button>
        </td></tr></table>
        <!--Go heading speed command-->
        <table style="border:1px solid black;" width="325"><tr><td><div align="center"><b>GO HEADING SPEED</b></div>
                <label for="heading_ghs"><i>Heading&nbsp</i></label>
                <input type="text" id="heading_ghs" name="heading_ghs" value="0" /><br>
                <label for="speed_ghs"><i>Speed&nbsp&nbsp&nbsp&nbsp&nbsp</i></label>
                <input type="text" id="speed_ghs" name="speed_ghs" value="0" /><br>
                <button onclick="goHeadingSpeed()">Send Command</button>
        </td></tr></table>
        <!--Go heading speed mixed command-->
        <table style="border:1px solid black;" width="325"><tr><td><div align="center"><b>GO HEADING SPEED MIXED</b></div>
                <label for="heading_ghsm"><i>Heading&nbsp</i></label>
                <input type="text" id="heading_ghsm" name="heading_ghsm" value="0" /><br>
                <label for="speed_ghsm"><i>Speed&nbsp&nbsp&nbsp&nbsp&nbsp</i></label>
                <input type="text" id="speed_ghsm" name="speed_ghsm" value="0" /><br>
                <button onclick="goHeadingSpeedMixed()">Send Command</button>
        </td></tr></table><br>

        <!--///////////////////
        /////WAYPOINT LIST/////
        ////////////////////-->
  </td><td valign="top"><table style="border:1px solid black;" width="450" height="600"><tr>
        <td valign="top"><div align="center"><b>WAYPOINT LIST</b></div>
                <ol id="wpt_list"></ol>
        </tr></td></table></td></tr></table>
 
  <!--////////////////////////////////////////////////////////////////////
        /////MAP FUNCITONALITY (tracing boats and setting future waypoints)/////
        /////////////////////////////////////////////////////////////////////-->
  <table><tr>
                <!--BOAT TRACE FUNCTIONALITY-->
                <td valign="top"><table style="border:1px solid black;" width="250"><tr><td><div align="center"><b>BOAT TRACES</b></div>
                        <!--Turning lines and markers on and off-->
                        <i>Boats to Trace</i>
                        <input type="checkbox" name="boat_num_to_trace_1_chk" id="boat_num_to_trace_1_chk"    
                                        onchange="changeBoatsToTrace()">1</input>
                        <input type="checkbox" name="boat_num_to_trace_2_chk" id="boat_num_to_trace_2_chk"    
                                        onchange="changeBoatsToTrace()" checked="checked">2</input>
                        <input type="checkbox" name="boat_num_to_trace_3_chk" id="boat_num_to_trace_3_chk"    
                                        onchange="changeBoatsToTrace()">3</input><br>
                        <i>Toggle Lines &nbsp&ensp;&ensp;</i>
                        <input type="radio" name="tog_lines_radio" id="tog_lines_radio_on" onchange="setLinesOn()" checked="checked">On</input>
                        <input type="radio" name="tog_lines_radio" id="tog_lines_radio_off" onchange="setLinesOn()">Off</input><br>
                        <i>Toggle Markers </i>
                        <input type="radio" name="tog_markers_radio" id="tog_markers_radio_on" onchange="setMarkersOn()">On</input>
                        <input type="radio" name="tog_markers_radio" id="tog_markers_radio_off" onchange="setMarkersOn()" checked="checked">Off</input><br>
                        <i>Boat Positions&nbsp&ensp;</i>
                        <input type="radio" name="boat_pos_radio" id="boat_pos_radio_on" onchange="setBoatPosOn()" checked="checked">On</input>
                        <input type="radio" name="boat_pos_radio" id="boat_pos_radio_off" onchange="setBoatPosOn()">Off</input><br>
                  <button onclick="clearLines()">Clear Lines</button>
                        <button onclick="clearMarkers()">Clear Markers</button><br>
                </td></tr></table>  
                 
                <!--OBSTACLE TRACE FUNCTIONALITY-->
		<table style="border:1px solid black;" width="250"><tr><td><div align="center"><b>OBSTACLE TRACES</b></div>
			<input type="radio" name="obstacle_pos_radio" id="obstacle_pos_radio_on" onchange="setObsPosOn()" checked="checked">On</input>
			<input type="radio" name="obstacle_pos_radio" id="obstacle_pos_radio_off" onchange="setObsPosOn()">Off</input><br>
		</td></tr></table>
                </td>
               
                <!--WAYPOINT SELECTION FUNCTIONALITY-->
                <td valign="top"><table style="border:1px solid black;" width="450"><tr><td><div align="center"><b>WAYPOINT EXECUTION</b></div>
                        <i>No. of Waypoints&nbsp&nbsp&nbsp&nbsp</i>
                        <input type="radio" name="num_wpts_radio" id="num_wpts_radio_sing" onchange="setMultPoints()">Single</input>
                        <input type="radio" name="num_wpts_radio" id="num_wpts_radio_mult" onchange="setMultPoints()" checked="checked">Multiple</input><br>
                        <i>Waypoint Execution </i>
                        <input type="radio" name="wpt_exec_radio" id="exec_wpt_radio_sing" onchange="setSingleExec()" checked="checked">Single Exec</input>
                        <input type="radio" name="wpt_exec_radio" id="exec_wpt_radio_loop" onchange="setSingleExec()">Loop</input><br>
                        <i>Waypoint Lines </i>
                        <input type="radio" name="wpt_line_radio" id="wpt_line_radio_show" onchange="showWaypointLines()" checked="checked">Show</input>
                        <input type="radio" name="wpt_line_radio" id="wpt_line_radio_hide" onchange="showWaypointLines()" >Hide</input><br>
                       
                        <label for="wpt_radius"><i>Waypoint Radius (m)</i></label>
                        <input type="text" id="wpt_radius" name="wpt_radius" value="5"
                        onchange="updateWaypointRadius()" /><br>
                        <button id="clear_wpts_btn" onclick="clearWaypoints()">Clear All Waypoints</button>
                        <button id="rm_wpt_btn" onclick="removeWaypoint()" disabled>Remove Waypoint</button><br>
                        <button id="save_wpts_btn" onclick="saveWaypoints()">Save Waypoint List</button><br>
                        <input type="checkbox" name="wpt_debug_chk" id="wpt_debug_chk"    
                                        onchange="toggleWaypointDebug()">Waypoint Debug</input>
                </td></tr></table></td>
               
                <!--PREVIOUS TRACE FUNCTIONALITY-->  
                <td valign="top"><table style="border:1px solid black;" width="400"><tr><td><div align="center"><b>PREVIOUS TRACES</b></div>
                        <i>Previous Trace</i>
                        <input type="radio" name="toggle_trace_type_radio" id="toggle_trace_time_radio_past" onchange="setRealTime()">
                                        Past &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&ensp;</input>
                        <input type="radio" name="toggle_trace_type_radio" id="toggle_trace_time_radio_curr" onchange="setRealTime()" checked="checked">Real-Time</input><br>
                        <i>Trace Speed&nbsp&nbsp&nbsp&nbsp</i>
                        <input type="radio" name="trace_speed_radio" id="trace_speed_radio_faster" onchange="setFaster()">All at Once</input>
                        <input type="radio" name="trace_speed_radio" id="trace_speed_radio_slower" onchange="setSlower()" checked="checked">Incremental</input><br>
                        <button id="start_trace_button" onclick="startTrace()">Start Trace</button>
                        <button id="stop_trace_button" onclick="stopTrace()">Stop Trace</button>
                        <button id="restart_trace_button" onclick="restart()">Restart Trace</button>
                </td></tr></table></td>

        </tr></table>

</body>
</html>

